<template>
  <div class="strategy" ref="homePage">
    <v-search></v-search>

    <div class="swipe" style="width: 100%;">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img width="100%" :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="welcome-box">
       <div class="text-box">
         <p class="welcome-title">苏州欢迎您</p>
         <p class="welcome-txt">欢迎您来到美丽的苏州，我们为您提供实用攻略和旅行建议，祝您旅途愉快！玩转苏城！</p>
       </div>
    </div>
    <div class="strategy-item2">
      <div class="img-box">
        <img style="height: 100%;display: block;" src="https://resource.sz-trip.com/uploads/20180630/c2033b4d8111e78a4d9069769a3c034e.jpg"/>
      </div>
      <p class="title">东洞庭山记</p>
      <div class="tips">
        <van-tag color="#46d0ca" plain>玩法</van-tag>
        <div class="tip-group">
          <van-icon style="margin-left: 1.25rem;margin-right: 0.3125rem;" size="15px" name="browsing-history-o" /><span>8888</span>
          <van-icon style="margin-left: 1.25rem;margin-right: 0.3125rem;" size="15px" name="good-job-o" /><span>666</span>
        </div>
      </div>
    </div>
    <v-Min></v-Min>
  </div>
</template>

<script>
  import search from '../search.vue'
  import Min from '../Min.vue'
  export default {
    components: {
      "v-search": search,
      "v-Min":Min,
    },
    data() {
      return {
        clintHeigth: '', //获取页面高度
        images: [
          'https://resource.sz-trip.com/uploads/20190411/454bc20376577deae0c7f9a6664ba7f7.jpg',
          'https://resource.sz-trip.com/uploads/20190930/19a0b1b137dbe32123a09b17d4815b3a.jpg'
        ]
      }
    },

    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
    },
    methods:{
      Jumpbuy() {
        this.$router.push({
          path: "/Home/productDetail",
      
        })
      },
    }
  }
</script>

<style lang="scss">
  .strategy {
    .swipe{
      .van-swipe{
        .van-swipe__indicators{
          .van-swipe__indicator--active{
            background-color: #46d0ca !important;
          }
        }
      }
    }
    .welcome-box{
      margin: 0.625rem auto;
      background: #fff;
      position: relative;
      color: #0096ff;
      width: 22.1875rem;
      height: 7.5rem;
      .text-box{
        position: absolute;
        left: 1.875rem;
        top: 0.25rem;
        right: 1.875rem;
        bottom: 0;
        .welcome-title{
          color: #46d0ca;
          font-size: 0.9375rem;
          line-height: 2.1875rem;
          text-align: center;
        }
        .welcome-txt{
          color: #858585;
          font-size: 0.625rem;
          line-height: 0.875rem;
          margin-bottom: 0.9375rem;
        }
      }
    }
    .strategy-item2{
      padding: 0.625rem;
      border-bottom: 0.0625rem solid #ececec;
      .img-box{
        height: 10.8125rem;
        display: flex;
        overflow: hidden;
        background: #000000;
        align-items: center;
        justify-content: center;
        .title{
          color: #605f69;
          font-size: 0.8125rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 0.1875rem;
          margin-top: 0.125rem;
        }
      }
      .tips{
        display: flex;
        justify-content: space-between;
        margin-right: 0.3125rem;
        .tip-group{
          display: flex;
          align-items: center;
          color: #959595;
          font-size: 0.625rem;
        }
      }
    }
  }
</style>
